<template>
  <div class="change_admin">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>登录账号</p>
          <el-input v-model="logTypeValue" size="mini" clearable />
        </el-col>
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="query()">{{ $t('button.query') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" class="gl_my_15">
      <!-- 添加客户按钮 -->
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" @click="editOfAdd('add')">添加</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="showTableData"
      style="width: 100%"
      stripe
      size="mini"
    >
      <el-table-column
        prop="loginAccount"
        label="登录账号"
      />
      <el-table-column
        prop="rolePermissions"
        label="角色权限"
      />
      <el-table-column
        prop="avatar"
        label="头像"
      >
        <template slot-scope="scope">
          <el-avatar shape="square" :size="50" :src="scope.row.avatar" />
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
      />
      <el-table-column
        prop="employeeType"
        label="员工类型"
      />
      <el-table-column
        prop="operating"
        label="操作"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editOfAdd(row,$index)">编辑</el-button>
          <el-button type="text" size="mini" @click="delect($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <staffManagementForm ref="studentCardForm" @pushTabelData="getTabelDate" />
  </div>
</template>

<script>
import staffManagementForm from './staffManagementForm';
export default {
  name: 'StudentCard',
  components: {
    staffManagementForm
  },
  data() {
    return {
      students: {
        name: ''
      },
      logTypeValue: '',
      tableData: [{
        loginAccount: '13081853982',
        rolePermissions: '角色不存在',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        name: '张三',
        employeeType: '教练'
      }, {
        loginAccount: '18382829320',
        rolePermissions: '管理员',
        avatar: '90',
        name: 'hh',
        employeeType: '管理者'
      }],
      showTableData: []
    };
  },
  created () {
    // 获取数据
    // this.tableData = 你获取的数据
    // this.showTableData = JSON.parse(JSON.stringify(你获取的数据))
    this.showTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    editOfAdd(row, index) {
      this.$refs.studentCardForm.open(row);
    },
    query() {
      let logTypeValue = this.logTypeValue;
      if (logTypeValue === '全部') {
        logTypeValue = '';
      }
      console.log(logTypeValue);
      this.showTableData = this.tableData.filter(item => item.loginAccount.includes(logTypeValue));
    },
    // 添加新信息
    getTabelDate(data) {
      this.showTableData.push(data);
      this.$refs.studentCardForm.close();
    },
    // 删除
    delect(index) {
      console.log(index);
      this.$confirm('你确定要删除这条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO
        this.showTableData.splice(index, 1);
      });
    }
  }
};
</script>

